<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>test</title>
	<script src="http://gallery.echartsjs.com/./dep/jquery/jquery.js"></script>
	<script type="text/javascript" src="echarts.min.js"></script>
	<script type="text/javascript" src="hunan.js"></script>
	<script type="text/javascript" src="china.js"></script>
	<link href="jz.css" rel="stylesheet">
	<!-- <style type="text/css">
		.mybox{
			width: 23.6%;height: 100px;float: left;margin-right: 1%
			;margin-top: 10px;border: 1px solid #ccc;border-width: 1px;box-shadow:1px 2px 1px #ccc;border-radius: 5px;
			font-family:Arial,Verdana,Sans-serif;
		}
		.mybox:hover{
			width: 23.6%;height: 100px;float: left;margin-right: 1%
			;margin-top: 10px;border: 2px solid #ccc;border-width: 1px;box-shadow:4px 8px 4px #ccc;border-radius: 5px;
			font-family:Arial,Verdana,Sans-serif;
		}
		.mybox .boximg{
			width:10%;height:100%;float: left;margin-top: 10px
		}
		.mybox .boximg img{width: 80px;height: 80px}
		.mybox .boxtxt{
			width:90%;height:100%;float: right;
		} 
		.mybox .boxtxt h2{margin-left: 60px;margin-top: center;font-weight: 100;color: #ffffff;float: right;margin-right: 10px}
	</style -->>
	
</head>
<body>
	<div id="main" style="width: 50%;height: 400px;float:left"></div>
	<div id="main1" style="width: 100%;height: 800px;float:left">
		<div class="mybox" style="background-color:#00BCD4">
			<div class="boximg">
				<img src="./magegin.png">
			</div>
			<div class="boxtxt">
				<h2>109G</br><font>数据总量</font></h2>
			</div>
		</div>
		<div class="mybox" style="background-color:#5CB85C">
			<div class="boximg">
				<img src="./database.png">
			</div>
			<div class="boxtxt">
				<h2>5900万</br><font>数据记录数</font></h2>
			</div>
		</div>
		<div class="mybox" style="background-color:#F9F9F9">
			<div class="boximg">
				<img src="./home.png">
			</div>
			<div class="boxtxt">
				<h2><font color="#000">52308人</font></br><font color="#000">病人总数</font></h2>
			</div>
		</div>
		<div class="mybox" style="background-color:#26A69A">
			<div class="boximg">
				<img src="./comm.png">
			</div>
			<div class="boxtxt">
				<h2>2002-2017</br><font>时间跨度</font></h2>
			</div>
		</div>


		<div class="mybox" style="background-color:#00BCD4">
			<div class="boximg">
				<img src="./magegin.png">
			</div>
			<div class="boxtxt">
				<h2>109G</br><font>数据总量</font></h2>
			</div>
		</div>
		<div class="mybox" style="background-color:#5CB85C">
			<div class="boximg">
				<img src="./database.png">
			</div>
			<div class="boxtxt">
				<h2>5900万</br><font>数据记录数</font></h2>
			</div>
		</div>
		<div class="mybox" style="background-color:#F9F9F9">
			<div class="boximg">
				<img src="./home.png">
			</div>
			<div class="boxtxt">
				<h2><font color="#000">52308人</font></br><font color="#000">病人总数</font></h2>
			</div>
		</div>
		<div class="mybox" style="background-color:#26A69A">
			<div class="boximg">
				<img src="./comm.png">
			</div>
			<div class="boxtxt">
				<h2>2002-2017</br><font>时间跨度</font></h2>
			</div>
		</div>
	</div>
	<script type="text/javascript">

		// var itemStyle = {
  //               normal:{
  //                   borderColor: 'rgba(0, 0, 0, 0)'
  //               },
  //               emphasis:{
  //                   shadowOffsetX: 0,
  //                   shadowOffsetY: 0,
  //                   shadowBlur: 20,
  //                   borderWidth: 0,
  //                   shadowColor: 'rgba(0, 0, 0, 0.5)'
  //               }
  //           };

var reloa = function(){
		var chart = echarts.init(document.getElementById('main'));
		var datas = new Array();
		var hunandatas = new Array();
		var maxmath = 1000000;
		hunan = ['长沙市','株洲市','湘潭市','衡阳市','邵阳市','岳阳市','常德市','张家界市','益阳市','郴州市','永州市','怀化市','娄底市','湘西土家族苗族自治州']
		for(i in hunan){
			hunandatas[i] = {};
			hunandatas[i].name=hunan[i]
			hunandatas[i].value=Math.round(Math.random(1000)*maxmath)
		}

		data=['河北','山西','辽宁','吉林','黑龙江','江苏','浙江','安徽','福建','江西','山东','河南','湖北','湖南','广东','海南','四川','贵州','云南','陕西','甘肃','青海','台湾','新疆','宁夏','内蒙古','西藏','重庆','北京','天津','广西','南海诸岛','上海','香港','澳门'];
		for(i in data){
			datas[i] = {};
			datas[i].name=data[i]
			datas[i].value=Math.round(Math.random(1000)*maxmath)
		}
		// for(i in datas.name){
		// 	datas[i].value=10000
		// }
		chart.setOption({
			visualMap: {
                	min:0,
                	max:maxmath,
               	inRange: {
                       color: ['#C5C5C5','#FFC303', '#FF9C02']  //ECharts 设置地图(map)值变化颜色(visualMap)
                   },
                    left: 'left',
                    top: 'bottom',
                    //text:['高','低'],           // 文本，默认为数值文本
                    calculable : true
                },
            tooltip: {
                trigger: 'item'
            },
            toolbox: {
		        show: true,
		        orient: "horizontal",
		        x: "center",
		        y: "top",
		        feature: {
		            mark: {
		                show: true
		            },
		            dataView: {
		                show: true,
		                readOnly: false
		            },
		            restore: {
		                show: true
		            },
		            saveAsImage: {
		                show: true
		            }
		        }
		    },
		    series: [{
		    	name: '',
		        type: 'map',
		        selectedMode: 'single',
		        showLegendSymbol: false,
		        mapType: 'china',
		        itemStyle: {
		            normal:{
	                    borderColor: 'rgba(0, 0, 0, 0)'
	                },
	                emphasis:{
	                    shadowOffsetX: 0,
	                    shadowOffsetY: 0,
	                    shadowBlur: 20,
	                    borderWidth: 0,
	                    shadowColor: 'rgba(0, 0, 0, 0.5)'
	                }
	        	},
	        	label: {
                    normal: {
                    	fontWeight:300,
                    	fontSize:8,
                    	color:'#9B5611',
                        show: true
                    },
                    emphasis: {
                        show: true
                    }
                },
	        	data:datas
		    }]
		});

		var setClickMap = function(){
			chart.on('click', function (param) {
            	if (param.name == '湖南') {
            		chart.setOption({
					    series: [{
					        type: 'map',
					        mapType: param.name,
					        data:hunandatas
					    }]
					});
            		chart.on('click', function (param) {
            			chart.setOption({
						    series: [{
						        type: 'map',
						        mapType: 'china',
						        data:datas
						    }]
						});
            			setClickMap()
            		})
            	}
        	});
		}
		setClickMap();

		$('.mybox').click(function(){
			$(this).siblings('div').removeClass('action');
			$(this).addClass('action');
		});

	}
	reloa()
	</script>
</body>
</html>